<template>
  <div class="personalVideo">
    <img class="fullScreen cp" @click="openFullScreen" src="@/assets/cfRoom/images/fullScreenBtn.png"
         ondragstart="return false" v-if="camera">
    <div class="des flex-end">
      <div class="host singleLine" v-if="isHost">主持人</div>
      <div class="mic">
        <microPhone v-if="voiced" :volume="volume"></microPhone>
        <img v-else src="@/assets/cfRoom/images/offAudio.png" alt="">
      </div>
      <span>{{ userInfo.user_name }}</span>
    </div>
    <div class="avatarBox" v-show="!camera">
      <avatar :imgID="userInfo.user_img_id" :fileType="1" :id="id" :radius="true"></avatar>
    </div>
    <video ref="video" autoplay :muted="tools.isSelf(this.id)" v-show="camera"></video>
  </div>
</template>

<script>
import microPhone from './microPhone'

export default {
  name: 'personalVideo',
  data () {
    return {
      // 音量处理对象
      volumeProgress: null,
      // 实时音量
      volume: null
    }
  },
  props: {
    // 用户ID
    id: {
      type: Number
    },
    // 是否启用摄像头
    camera: {
      type: Boolean
    },
    // 是否启用麦克风
    voiced: {
      type: Boolean
    },
    // 媒体流
    mediaStream: {
      type: MediaStream
    }
  },
  computed: {
    // 是否为主持人
    isHost () {
      return this.tools.conference.isHost(this.id)
    },
    // 当前用户信息
    userInfo () {
      return this.$store.state.chatInformation.userList[this.id]
    },
    // 当前输入设备是否发生过变化
    ifChangeInput () {
      return this.$store.state.conferenceRoom.ifChangeInput
    }
  },
  watch: {
    // 监听mediaStream
    mediaStream: {
      immediate: true,
      deep: true,
      handler (val) {
        if (val) {
          this.$nextTick(async () => {
            if (this.$refs.video) {
              this.$refs.video.srcObject = val

              this.$refs.video.onloadedmetadata = () => {
                this.$refs.video.play()
              }
              this.$refs.video.addEventListener('pause', () => {
                if (this.$refs.video) {
                  this.$refs.video.play()
                }
              })
              this.$refs.video.addEventListener('ended', () => {
              }, false)
              // 获取音量
              this.tools.webRTC.getVolume(val).then(res => {
                this.volumeProgress = null
                this.volumeProgress = res
                // 监听音量变化
                this.volumeProgress.onaudioprocess = (e) => {
                  const volume = e.inputBuffer.getChannelData(0)
                  let maxVolume = Math.max.apply(Math, volume)
                  maxVolume = Math.round(maxVolume * 100)
                  this.volume = maxVolume
                }
              })
            }
          })
        }
      }
    },
    // 监听是否输入设备发生变化
    ifChangeInput: {
      handler (val) {
        if (val && this.tools.isSelf(this.id)) {
          this.tools.webRTC.getVolume(this.mediaStream).then(res => {
            this.volumeProgress = null
            this.volumeProgress = res
            // 监听音量变化
            this.volumeProgress.onaudioprocess = (e) => {
              const volume = e.inputBuffer.getChannelData(0)
              let maxVolume = Math.max.apply(Math, volume)
              maxVolume = Math.round(maxVolume * 100)
              this.volume = maxVolume
            }
            this.$store.commit('conferenceRoom/set_ifChangeInput', false)
          })
        }
      }
    }
  },
  components: {
    microPhone
  },
  methods: {
    // 全屏
    openFullScreen () {
      this.$store.commit('conferenceRoom/set_fullScreen_id', this.id)
    }
  },
  created () {
  }
}
</script>

<style scoped lang="scss">
.personalVideo {
  padding: 6px;
  background-color: #000;
  position: relative;
  .avatarBox {
    width: 96px;
    height: 96px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  video {
    width: 100%;
    height: 100%;
    background-color: #000;
  }

  .fullScreen {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 99;
    width: 40px;
    height: 32px;
  }

  .des {
    position: absolute;
    right: 6px;
    bottom: 6px;
    height: 24px;
    line-height: 24px;
    font-size: 0;
    background-color: rgba(12, 23, 47, 0.60);

    .host {
      width: 48px;
      height: 24px;
      text-align: center;
      background-color: #FFB415;
      color: #fff;
      font-size: 12px;
      display: inline-block;
    }

    .mic {
      height: 16px;
      width: 16px;
      display: inline-block;
      margin-left: 4px;

      img {
        width: 16px;
        height: 16px;
        vertical-align: top;
      }
    }

    span {
      color: #fff;
      font-size: 12px;
      padding-right: 6px;
    }
  }
}
</style>
